<template>
  <div class="info">
    <van-nav-bar title="预约详情" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <van-cell title="姓名" :value="info.realname" />
      <van-cell title="手机号" :value="info.phone" />
      <van-cell title="预约日期" :value="info.apply_date" />
      <van-cell title="预约时间段" :value="info.apply_time" />
      <van-cell
        v-if="info.cultural_center"
        title="预约场馆"
        :value="info.cultural_center.name"
      />
      <van-cell title="记录时间" :value="info.create_time" />
    </van-cell-group>
    <div class="btn" :class="info.status == 0 ? 'status1' : 'status2'">
      {{ status }}
    </div>
  </div>
</template>
<script>
import { NavBar, Cell, CellGroup, Icon } from "vant";
import { appointmentDetail } from "@/api/apiData";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
  },
  data() {
    return {
      status: "",
      info: "",
    };
  },
  mounted() {
    let id = this.$route.query.id;
    console.log(id);
    appointmentDetail({ id: id }).then((res) => {
      this.info = res.data;
      if (res.data.status == 0) {
        this.status = "预约成功";
      } else {
        this.status = "预约已失效";
      }
    });
  },
  methods: {
    onClickLeft() {
      let id = this.$route.query.idR;
      if (id) {
        this.$router.replace({
          path: "/bookList",
          query: {
            id: id,
          },
        });
      }else{
          this.$router.replace('/bookList2');
      }
    },
  },
};
</script>
<style scoped>
.btn {
  width: 90%;
  margin: 30px auto;
  border-radius: 30px;
  text-align: center;
  line-height: 2.5;
  color: #fff;
  font-size: 15px;
}
.status1 {
  background: #0d7a4d;
}
.status2 {
  background: gray;
}
</style>